<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>emlog</title>
        <style type="text/css">
        * {
            margin: 0;  /*居中*/
            text-decoration: none;  /*无下划线*/
        
        }

        .header {
            width: 100%;
            height: 50px;
            background: #303036;  /*头部颜色*/
            top:0;  /*置顶顶部*/
            position: fixed        /*填满顶部*/
           
        }

       .header .logo {
            float: left;
            margin: 10px ;/*zuo边字体头部居中 */
            font-family: "微软雅黑";
            margin-left: 50px;
            font-size: 20;
           
        }                      

        .header .right {
            float: right;/*头部首页等居右*/
        }   

       .header ul  {
            list-style: none;/*无符号*/
        }

        .header ul li {
            float: left; 
            padding:0 15px;/*首页 模板等之间的空白填充*/
            line-height: 50px;/*首页模板等水平居中*/
             
        }

        .box {
            width: 100%;
            height: 500px; 
            background-color:rgb(248, 248, 248);
            margin-top: 0px; /*logo盒子与头部连接*/
            font-family: "Terminal";   
        }

        .box .center{
            padding-top: 150px;/*hi emlog距头部距离*/
            text-align: center;/*emlog永远居中*/
            background-color: rgb(248, 248, 248);
            font-family: "微软雅黑";
        }

        .mnb{
            width: 100%;
            height: 200px; 
            background-color:rgb(248, 248, 248);
            margin-top: 0px; /*logo盒子与头部连接*/
            font-family: 宋体;
            font-size: 18;
            padding-top: 20px;/*hi emlog与"基于..."的距离*/
            text-align: center;/*emlog永远居中*/
           
        }

        .button{
            width:center;/*按钮居中*/
            margin-top: 10px; /*按钮与"基于..."的距离*/
            font-family: "微软雅黑";      
        }

        .button.qwer{
            width: 100px;/*边框长度*/
            height: 40px;/*边框高度*/
            color:rgb(234, 236, 238);/*字体颜色*/
            background-color: rgb(19, 115, 206);/*边框颜色*/
            text-align: center;
            border-radius: 5px; /*按钮边角半圆大小*/
            font-family: "微软雅黑";
        }
       
        .button .asd{
            font-family: "微软雅黑";
            width: 80px;
            height: 40px;
            color:rgb(252, 252, 252);/*字体颜色*/
            background-color: rgb(71, 78, 85);/*边框颜色*/
            text-align: center;
            border-radius: 5px; /*按钮边角半圆大小*/
        }
        .the{
            width: 100%;
            height: 350px;
            background-color: rgb(255, 255, 255);
            margin-top: 45px;
            
}

         .the .shy{
             width: 35%;
             height: 20%;
             background-color: rgb(255, 255, 255);
             margin:auto;
             padding: 50px 10px 10px 10px;
             font-weight: 50;
             font-size:xx-large;  
         }

         .the .jkl{
             width: 90%;
             height: 100%;
             background-color:rgb(255, 255, 255);
             margin: auto;
             font-size: 18;
             font-weight: 5;
             margin-top: 30
         }

         .ig{
            width: 100%;
            height: 350px;
            background-color: rgb(247, 247, 247);
            margin-top: 45px;
            
         }

         .ig .nb{
             width: 35%;
             height: 20%;
             background-color: rgb(247, 247, 247);
             margin:auto;
             padding: 50px 10px 10px 10px;
             font-weight: 50;
             font-size:xx-large;  
         }

         .ig .pl{
             width: 90%;
             height: 100%;
             background-color:rgb(247, 247, 247);
             margin: auto;
             font-size: 18;
             font-weight: 5;
             margin-top: 30
         }

         .qwer{
            width: 100%;
            height: 350px;
            background-color: rgb(255, 255, 255);
            margin-top: 0px;
            
         }

         .qwer .fgh{
             width: 35%;
             height: 20%;
             background-color: rgb(255, 255, 255);
             margin:auto;
             padding: 50px 10px 10px 10px;
             font-weight: 50;
             font-size:xx-large;  
         }

         .qwer .cvb{
             width: 90%;
             height: 100%;
             background-color:rgb(255, 255, 255);
             margin: auto;
             font-size: 18;
             font-weight: 5;
             margin-top: 30
         }

         .foot{
             width: 100%;
             height: 300px;
             background-color: rgb(238, 238, 234);
             margin-top: 5px;
         }

         .foot .one{
             width: 25%;
             height: 100%;
             background-color: blueviolet;
         }

        </style>

<body>
<div class="header">
<div class="logo">
<div class="left">
     
    <a href="#"><h3>EMLOG</h3></a>
</div>

</div>
<div class="right">
<ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">模板</a></li>
    <li><a href="#">下载</a></li>
    <li><a href="#">插件</a></li>
</ul>
</div>
</div>

<div class="box">
<div class="center">
<h1>Hi, emlog pro</h1></br></br>
<div class="mnb">
 <h3>基于PHP和MySQL的功能强大的博客及CMS建站系统，追求快速、稳定、简单、舒适的建站体验。</h3>
 <div class="button">
    <button type="button" class="button qwer">下载emlog
    </button>
    <button type="button" class="button asd">Github</button>
</div>
   </div>
    </div>
    <div class="the">
        <div class="shy">
            <p>快速、稳定</p>
            <div class="jkl">
                一切操作都应该是快速的，我们无法容忍繁杂的功能设计和龟速的反应，不管你是个人用户还是有大量数据的专业博主，都可以快速和稳定的使用emlog。
            </div>
        </div>
    </div>
  
    <div class="ig">
        <div class="nb">
            <p>简单、舒适</p>
            <div class="pl">
                如果说我们有什么初心的话，那么坚持简单就是其中最重要的一条。我们讨厌看不懂的各种复杂的设置，我们希望你只需要简单的操作就可以完成emlog的搭建和使用，把更多的精力放在内容创造上。
            </div>
        </div>
    </div>
    <div class="qwer">
        <div class="fgh">
            <p>自由扩展</p>
            <div class="cvb">
                从很早的版本开始，emlog就支持模板和插件。用户可以自行编写属于自己的模板和特殊功能的插件来适应更多场景，当然你也可以方便的下载别人发布的免费插件和模板。
            </div>
        </div>
    </div>

<div class="foot">
    <div class="one">
        <div class="two">
            <div class="three">
                <div class="four">
                    
                </div>
            </div>
        </div>
    </div>
</div>
   </body>
   </head>
        